<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#18C7E2"
          inactive-color="#717171"
          ref="tabs"
          height="120"
          bar-width="60"
          :list="listtitle"
          :current="current"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
          font-size="32"
          class="bd"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item bd">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <u-table>
              <u-tr style="height: 120rpx; background-color: #ffffff">
                <u-th class="bd t1">计划名称</u-th>
                <u-th class="bd t1">预约时间</u-th>
                <u-th class="bd t1">时间段</u-th>
                <u-th class="bd t1">状态</u-th>
              </u-tr>
              <u-tr
                v-for="(v, index) in list"
                :key="v.id"
                style="height: 90rpx"
              >
                <u-td class="bd t1">{{ v.planName }}</u-td>
                <u-td class="bd t1">{{ v.time }}</u-td>
                <u-td class="bd t1">{{ v.slot }}</u-td>
                <u-td class="bd t1">
                  {{ v.state }}
                </u-td>
              </u-tr>
            </u-table>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%" class="bd">
            <u-table>
              <u-tr style="height: 120rpx; background-color: #ffffff">
                <u-th class="bd t1">登记社区</u-th>
                <u-th class="bd t1">登记疫苗</u-th>
                <u-th class="bd t1">登记时间</u-th>
              </u-tr>
              <u-tr
                v-for="(v, index) in listAd"
                :key="v.id"
                style="height: 160rpx"
              >
                <u-td class="bd t1">{{ v.deptName }}</u-td>
                <u-td class="bd t1">{{ v.vaccinesName }}</u-td>
                <u-td class="bd t1">{{ v.createTimes }}</u-td>
              </u-tr>
            </u-table>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { parseTime } from "@/utils/parseTime";
export default {
  data() {
    return {
      list: [], //预约家庭列表
      listtitle: [
        {
          name: "预约列表",
        },
        {
          name: "需求登记列表",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      listAd: [], //预约登记疫苗
      sq: "",
    };
  },
  onLoad() {
    this.shequ();
    this.getFamilyList();
    this.getAddList();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    shequ() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/common/getUserInfo/getDeptInfo", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    // 获取疫苗登记信息
    getAddList() {
      let self = this;
      this.config.get("/subscribesInfos/appointment", {}).then((res) => {
        if (res.data.code === 200) {
          this.listAd = res.data.data;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // 获取家庭组列表
    getFamilyList() {
      let self = this;
      this.config.get("/subscribesInfos/getInfo", {}).then((res) => {
        if (res.data.code === 200) {
          self.list = res.data.data;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
};
</script>
<style scoped lang="scss" scoped>
uni-swiper {
  height: 100% !important;
}

/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */

uni-view.u-tabs-box {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.carinfo {
  border-top: 1px solid #eeeeee;
  margin-bottom: 25rpx;
}

.wrap {
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #ffffff;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
  background-color: white;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>